<div class="row">
    <div class="col-md-12">
        <p>{{ summary.description }}</p>
    </div>
</div>
<div class="row content-wrapper">
    <div class="col-md-8 md-container pl-1">
        <div
            *ngIf="readme"
            class="md-div"
            [innerHTML]="readme | markdown"></div>
        <div *ngIf="!readme">{{ 'HELM_CHART.NO_README' | translate }}</div>
    </div>
    <div class="col-md-4 summary-container mt-1">
        <div class="col-md-12 content-group">
            <div>
                <label>{{ 'HELM_CHART.OVERVIEW' | translate }}</label>
            </div>
            <table class="table">
                <tbody>
                    <tr>
                        <td class="left">
                            {{ 'HELM_CHART.HOME' | translate }}
                        </td>
                        <td class="left text-wrapper">
                            <a href="{{ summary.home }}">{{ summary.home }}</a>
                        </td>
                    </tr>
                    <tr *ngFor="let src of summary.sources; let i = index">
                        <td class="left" *ngIf="i === 0">
                            {{ 'HELM_CHART.SRC_REPO' | translate }}
                        </td>
                        <td class="left" *ngIf="i !== 0"></td>
                        <td class="left text-wrapper">
                            <a href="{{ src }}">{{ src }}</a>
                        </td>
                    </tr>
                    <tr>
                        <td class="left">
                            {{ 'HELM_CHART.CREATED' | translate }}
                        </td>
                        <td class="left">
                            {{ summary.created | harborDatetime }}
                        </td>
                    </tr>
                    <tr
                        *ngFor="
                            let maintainer of summary.maintainers;
                            let i = index
                        ">
                        <td class="left" *ngIf="i === 0">
                            {{ 'HELM_CHART.MAINTAINERS' | translate }}
                        </td>
                        <td class="left" *ngIf="i !== 0"></td>
                        <td class="left">
                            <a href="mailto:{{ maintainer.email }}">{{
                                maintainer.name
                            }}</a>
                        </td>
                    </tr>
                    <tr>
                        <td class="left">
                            {{ 'HELM_CHART.APP_VERSION' | translate }}
                        </td>
                        <td class="left">{{ summary.appVersion }}</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="col-md-12 content-group">
            <div>
                <label>{{ 'HELM_CHART.COMMAND' | translate }}</label>
            </div>
            <table class="table">
                <tbody>
                    <tr>
                        <td class="left cmd-title">
                            {{ 'HELM_CHART.ADD_REPO' | translate }}
                        </td>
                        <td class="left cmd-content">
                            <input
                                class="cmd-content clr-input"
                                type="text"
                                [(ngModel)]="addCMD"
                                #addCMDInput
                                readonly />
                        </td>
                        <td class="left">
                            <span>
                                <clr-icon
                                    shape="copy"
                                    size="24"
                                    [class.is-success]="isCopied('add')"
                                    [ngxClipboard]="addCMDInput"
                                    (cbOnSuccess)="
                                        onCopySuccess($event, 'add')
                                    "></clr-icon>
                            </span>
                        </td>
                    </tr>
                    <tr>
                        <td class="left cmd-title">
                            {{ 'HELM_CHART.INSTALL_CHART' | translate }}
                        </td>
                        <td class="left">
                            <input
                                class="cmd-content clr-input"
                                type="text"
                                [(ngModel)]="installCMD"
                                #installCMDInput
                                readonly />
                        </td>
                        <td class="left">
                            <span>
                                <clr-icon
                                    shape="copy"
                                    size="24"
                                    [class.is-success]="isCopied('install')"
                                    [ngxClipboard]="installCMDInput"
                                    (cbOnSuccess)="
                                        onCopySuccess($event, 'install')
                                    "></clr-icon>
                            </span>
                        </td>
                    </tr>
                    <tr *ngIf="prov_ready">
                        <td class="left cmd-title">
                            {{ 'HELM_CHART.VERIFY_CHART' | translate }}
                        </td>
                        <td class="left">
                            <input
                                class="cmd-content clr-input"
                                type="text"
                                [(ngModel)]="verifyCMD"
                                #verifyCMDInput
                                readonly />
                        </td>
                        <td class="left">
                            <span>
                                <clr-icon
                                    shape="copy"
                                    size="24"
                                    [class.is-success]="isCopied('verify')"
                                    [ngxClipboard]="verifyCMDInput"
                                    (cbOnSuccess)="
                                        onCopySuccess($event, 'verify')
                                    "></clr-icon>
                            </span>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>

        <div class="col-md-12 content-group">
            <div>
                <label>{{ 'HELM_CHART.SECURITY' | translate }}</label>
            </div>
            <table class="table">
                <tbody>
                    <tr>
                        <td class="left">
                            {{ 'HELM_CHART.PROV_FILE' | translate }}
                        </td>
                        <div
                            *ngIf="
                                prov_ready;
                                then signedContent;
                                else unsignedContent
                            "></div>
                        <ng-template #signedContent>
                            <td class="left">
                                <span class="content-icon">
                                    <clr-icon
                                        shape="shield-check"
                                        class="is-success"></clr-icon> </span
                                >&nbsp;<a
                                    href="javascript:void(0)"
                                    (click)="downloadChart()"
                                    >{{ 'HELM_CHART.READY' | translate }}</a
                                >
                            </td>
                        </ng-template>
                        <ng-template #unsignedContent>
                            <td class="left">
                                <span class="content-icon">
                                    <clr-icon
                                        shape="shield-x"
                                        class="is-error"></clr-icon> </span
                                >&nbsp;{{ 'HELM_CHART.NOT_READY' | translate }}
                            </td>
                        </ng-template>
                    </tr>
                </tbody>
            </table>
        </div>

        <div class="col-md-12 content-group">
            <div>
                <label>{{ 'HELM_CHART.LABELS' | translate }}</label>
            </div>
            <table class="table">
                <tbody>
                    <tr>
                        <td class="left">
                            {{ 'HELM_CHART.LABELS' | translate }}
                        </td>
                        <td class="left">{{ labels?.length }}</td>
                    </tr>
                    <tr *ngIf="labels?.length > 0">
                        <td></td>
                        <td class="left">
                            <hbr-label-piece
                                *ngFor="let label of labels"
                                [label]="label"
                                [labelWidth]="90">
                            </hbr-label-piece>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
